<template>
	<view h-full p-4>

            <view class="summary-card" flex-col mt-20 >
                <view flex @click="show=true">
                    <view>
                        <up-avatar :src="user.avatar" size="70" ></up-avatar>
                    </view>
                    <view flex center ml-4 flex-col>
                        <view>{{ user.nickname }}</view>
                        <view text-gray text-24>{{ user.title }}</view>
                    </view>
                    <view flex flex-1 justify-end>
                        <up-icon name="arrow-right" color="#969799" size="28"></up-icon>
                    </view>
                </view>
                <view flex flex-col mt-4>
                    <view flex flex-row gap-2 center>
                        <view>Lv.<text text-lg>{{ user.level }}</text></view>
                        <view text-gray text-20 flex-1 center>{{ user.exp }}</view>
                        <view flex  justify-end><text>Lv.<text text-lg>{{ user.level+1 }}</text></text></view>
                    </view>
                    <mprogress height="2" :percentage="userExpProcent"></mprogress>
                </view>
            </view>

            <!-- 主要数据模块 -->
            <view class="grid-container" v-if="statistic && statistic.total>0">
                <!-- 发布的任务 -->
                <w-statistic title="我发布的任务" :data="statistic.mytask" theme="blue-theme"></w-statistic>
                <!-- 收到的任务 -->
                <w-statistic title="我收到的任务" :data="statistic.mywork" theme="green-theme"></w-statistic>
            </view>
            <view v-else>
                <up-empty></up-empty>
            </view>
		
		<view class="summary-card" mt-10>
            <button open-type="contact" class="button-item">
            <view class="icon">
                    <up-icon text-center
                        name="kefu-ermai" color="white"
                        size="30"
                ></up-icon>
            </view>
            <text class="text">客服</text>
            </button>
            <button open-type="phone" class="button-item" @click="handlePhone">
            <view class="icon">
            <up-icon
                    name="phone"
                    size="30" color="white"
            ></up-icon>
            </view>
            <text class="text">电话</text>
            </button>

            <button open-type="feedback"  class="button-item">
            <view class="icon">
            <up-icon
                    name="share-square"
                    size="30" color="white"
            ></up-icon>
            </view>
            <text class="text">反馈</text>
            </button>

            <button open-type="share"  class="button-item">
                <view class="icon">
            <up-icon 
                    name="share"
                    size="30" color="white"
            ></up-icon>
            </view>
            <text class="text">分享</text>
            </button>
		</view>
		
        <userinfo type="bottom" :show="show" border-radius="14" title="男友使用指南" @update="handleUpdateUser" @update:show="show=$event">
        </userinfo>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
    import { useUserStore } from '@/stores/user'
    import { onLoad } from '@dcloudio/uni-app'
    import {updateUser} from '@/api/account'
    import { User } from '@/types/user'
    import { apiGetStatistic } from '@/api/task'
	
    const show = ref<boolean>(false)
    const userStore = useUserStore()

    interface TaskStistic {
        count: number
        complete: number
    }
    interface Statistic {
        mytask: TaskStistic
        mywork: TaskStistic
        total: number
    }

    const user = ref<User>({
        id: 1,
        sn: '',
        avatar: '@src/static/images/user/default_avatar.png',
        nickname: '请先登陆',
        phone: '15604081093',
        create_time: '2022-01-01 00:00:00',
        update_time: '2022-01-01 00:00:00',
        status: 1,
        token: 'token',
        expire: 0,
        title: '普通用户',
        level: 1,
        exp: 0,
        exp_next: 50,
        exp_level: 0
    })

    const userExpProcent = computed(() => {
        if(user.value.exp_next>0){
            return Math.round(100*(user.value.exp-user.value.exp_level)/(user.value.exp_next-user.value.exp_level))
        }else{
            return 5
        }
    })
 
    const statistic = ref<Statistic>()

    onLoad(() => {
        userStore.getUser().then(() => {
            user.value = userStore.userInfo
            if(user.value.exp>=user.value.exp_next){
                console.log('升级',user.value.exp)
            }
        })
        apiGetStatistic().then(res=>{
            statistic.value=res
        })
    })
    const handleUpdateUser = async (value : any) => {
        user.value.avatar = value.avatar
        user.value.nickname = value.nickname
        updateUser(value,{}).then(res=>{
            show.value = false;
        }).catch(err=>{
            uni.$u.toast('操作失败')
        });
    }

    const handlePhone = () => {
        uni.makePhoneCall({
            phoneNumber: '15604081093'
        })
    }
</script>

<style lang="scss">
page{
	background-color: #f7f7f1 !important;
    background-image: url('../../static/images/user/bg.jpeg');
    background-repeat: no-repeat;
}


.button-item{
    border: none;
    border-style: none;
    line-height: 1.2;
    background: none;
    
    .icon{
        background-color: #1890ff;
        width: 75rpx;
        height: 75rpx;
        border-radius: 9999rpx;
        display: flex;
        justify-content: center;
    }
    .text{
        font-size: 20rpx;
        color: #666;
        line-height: 1;
    }
}


.summary-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

/* 响应式网格布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320rpx, 1fr));
  gap: 15rpx;
}
</style>